<ix-page-header>
  <mat-button-toggle-group [value]="activeNfsType()" (change)="nfsTypeChanged($event)">
    <mat-button-toggle [value]="NfsType.Nfs3">NFS 3</mat-button-toggle>
    <mat-button-toggle [value]="NfsType.Nfs4">NFS 4</mat-button-toggle>
  </mat-button-toggle-group>

  <ix-search-input1
    [value]="filterString"
    (search)="onListFiltered($event)"
  ></ix-search-input1>

  @if (activeNfsType() === NfsType.Nfs3) {
    <ng-container
      *ngTemplateOutlet="nfsColumnsSelector; context: { dataProvider: nfs3DataProvider, columns: nfs3Columns }"
    ></ng-container>
  }

  @if (activeNfsType() === NfsType.Nfs4) {
    <ng-container
      *ngTemplateOutlet="nfsColumnsSelector; context: { dataProvider: nfs4DataProvider, columns: nfs4Columns }"
    ></ng-container>
  }

  <button mat-button color="primary" ixTest="refresh-data" (click)="loadData()">
    {{ 'Refresh' | translate }}
  </button>
</ix-page-header>

@if (activeNfsType() === NfsType.Nfs3) {
  <ng-container
    *ngTemplateOutlet="nfsTable; context: { dataProvider: nfs3DataProvider, columns: nfs3Columns }"
  ></ng-container>
}

@if (activeNfsType() === NfsType.Nfs4) {
  <ng-container
    *ngTemplateOutlet="nfsTable; context: { dataProvider: nfs4DataProvider, columns: nfs4Columns }"
  ></ng-container>
}

<ng-template #nfsColumnsSelector let-dataProvider="dataProvider" let-columns="columns">
  <ix-table-columns-selector
    [columnPreferencesKey]="'nfsSessionList'"
    [columns]="columns"
    (columnsChange)="columnsChange($event)"
  ></ix-table-columns-selector>
</ng-template>

<ng-template #nfsTable let-dataProvider="dataProvider" let-columns="columns">
  <ix-table
    class="table"
    [ixUiSearch]="searchableElements.elements.nfsSessions"
    [ix-table-empty]="!(dataProvider.currentPageCount$ | async)"
    [emptyConfig]="emptyService.defaultEmptyConfig(dataProvider.emptyType$ | async)"
  >
    <thead
      ix-table-head
      [columns]="columns"
      [dataProvider]="dataProvider"
    ></thead>
    <tbody
      ix-table-body
      [columns]="columns"
      [dataProvider]="dataProvider"
      [isLoading]="!!(dataProvider.isLoading$ | async)"
    ></tbody>
  </ix-table>
  <ix-table-pager [dataProvider]="dataProvider"></ix-table-pager>
</ng-template>
